<template>
	<div class="personag_plan">
		<pre id="fit1" class="hide"></pre>
		<textarea id="fit2" :ref="`targetIn${inputMark}`" v-model="currentValue"
		  @input="handleChangeSchedule"
		  style="resize:none;background-color: #eeeeee;border: 0px solid"
		  @keydown="update($event,inputMark)"></textarea>

		<div :id="`show_${inputMark}`" class="show personnel_list">
			<div class="list_box" :class='{active:index==dynamic}'
			  v-for="(val,index) in personnel_list" :key="val.id" @click="switchover(index,val)">
				<div class="list_left">
					<img :src="val.nameUrl" alt=""
					  v-if="val.nameUrl.substr(-3,3)== 'jpg'||val.nameUrl.substr(-3,3)=='png'||val.nameUrl.substr(-3,3)== 'ico'||val.nameUrl.substr(-3,3)== 'gif'||val.nameUrl.substr(-3,3)== 'bmp'">
					<p v-else>{{ val.nameUrl.substr(-2,2) }}</p>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
export default {
	name: 'Inquire',
	props: {
		inputMark: {
			type: [String, Number],
			default: '0'
		},
		router_type: {
			type: String,
			default: ''
		}, //路由跳转
		value: {
			type: String,
			default: ''
		},
		// dynamic: false
	},
	computed: {
		currentValue: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit('input', val)
			}
		}
	},
	data() {
		return {
			personnel_list: [{
					id: 1,
					nameUrl: 'https://img-blog.csdnimg.cn/20191221103729819.jpg',
					name: '芳芳',
					position: '人事部'
				},
				{
					id: 2,
					nameUrl: '王芳',
					name: '芳芳r',
					position: '人事部'
				},
				{
					id: 3,
					nameUrl: '王芳单独dfdfd',
					name: '芳芳r',
					position: '人事部'
				},
				{
					id: 4,
					nameUrl: '王芳sd单独',
					name: '芳芳王芳sd单独',
					position: '人事部'
				}
			],
			dynamic: false
		}
	},
	methods: {
		handleChangeSchedule(e) {
			const s = document.getElementById(`show_${this.inputMark}`)
			if (e && e.data === '@' && this.router_type === 'plan') {
				let elem = this.$refs[`targetIn${this.inputMark}`]
				let p = this.$kingwolfofsky.getInputPositon(elem)
				s.style.top = p.top + 'px'
				s.style.left = p.left + 'px'
				s.style.display = 'inherit'
			} else {
				s.style.display = 'none'
			}
		},
		async switchover(index, val) {
			this.dynamic = index
			this.$emit('staffValue', val.name.substr(-2, 2), this.inputMark)
			const s = document.getElementById(`show_${this.inputMark}`)
			s.style.display = 'none'
			let myValue = val.name.substr(-2, 2)
			const myField = this.$refs[`targetIn${this.inputMark}`]

			if (myField.selectionStart || myField.selectionStart === 0) {
				let startPos = myField.selectionStart
				let endPos = myField.selectionEnd
				this.currentValue = myField.value.substring(0, startPos) + myValue + myField
					.value.substring(endPos, myField.value.length)
				await this.$nextTick() // 这句是重点, 圈起来,不加的话后面两步有问题
				myField.focus()
				myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
			} else {
				this.currentValue += myValue
			}
		},
		update(e, index) {
			if (e.keyCode === 13) {
				e.preventDefault() // 阻止浏览器默认换行操作
				this.$emit('isShut', index, false)
			}
		}
		//textarea自适应高度
		// selfAdaption() {
		//   var textarea = document.getElementById('fit2')
		//   var pre = document.getElementById('fit1')
		//   pre.innerHTML = textarea.value
		//   var realHeight = pre.offsetHeight//offsetHeight = height + padding + border
		//   if (realHeight > 120) {
		//     textarea.style.height = (realHeight + 24 - 32) + 'px'
		//   }//加24为一行的高度，减32为padding和border
		//   else {
		//     textarea.style.height = realHeight - 32 + 'px'
		//   }
		// }
	}
}
</script>

<style scoped>
.personag_plan {
	width: 100%;
	position: relative;
}

#fit1 {
	width: 100%;
	margin: 0 0 30px 0;
	padding: 10px 10px 20px;
	border: 1px solid #e6e6e6;
	resize: none;
	border-radius: 3px;
	font-size: 16px;
	overflow: hidden;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.hide {
	visibility: hidden;
	position: absolute;
	z-index: -100;
}

#fit2 {
	width: 100%;
	height: auto;
	resize: none;
	border: 1px solid #e6e6e6;
	border-radius: 3px;
	font-size: 16px;
	word-wrap: break-word;
	color: #333333;
}

.personnel_list {
	width: 160px;
	height: 180px;
	box-shadow: 0px 2px 10px 0px #efefef;
	overflow: auto;
	background: #fff;
}

.active {
	background: #f1f2f3;
}

.show {
	position: fixed;
	display: none;
	z-index: 2100;
}

.list_box {
	width: 100%;
	height: 60px;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}

.list_left {
	margin-right: 10px;
}

.list_left>img {
	width: 40px;
	height: 40px;
	border-radius: 5px;
}

.list_left>p {
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	color: #fff;
	font-size: 14px;
	background: linear-gradient(180deg, #f1bc57, #f9ac79);
	border-radius: 5px;
}

.list_right>p:nth-child(1) {
	color: #666666;
	font-size: 14px;
}

.list_right>p:nth-child(2) {
	color: #cdcdcd;
	font-size: 12px;
}

.personnel_list::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.personnel_list::-webkit-scrollbar-thumb {
	background-color: #dddddd;
	background-clip: padding-box;
	min-height: 28px;
}

.personnel_list::-webkit-scrollbar-thumb:hover {
	background-color: #bbb;
}

.personnel_list::-webkit-scrollbar-track-piece {
	background-color: #f8f8f8;
}

#fit2:focus {
	border: 1px #409eff solid;
	outline: none;
}
</style>
